Application software is a computer-executable program that directs a computer (e.g., personal computer, tablet computer, smartphone, etc.) to perform useful tasks for the benefit of the end user of the computer. Typically, application software is not involved in merely operating the computer itself. Individual application software packages are often called simply an application or an app.
Typically, an app has a user interface (UI) that allows a user (i.e., human) to interact with an application and the computer/network associated with that application. Many apps have a graphical user interface (i.e., graphical UI or GUI), which is a type of user interface that allows users to interact with electronic devices through graphical icons and visual indicators.
A GUI typically includes UI control objects, which may be called UI controls or UI elements. Examples of UI controls include buttons, lists, and text fields. UI controls are commonly used for organizing content displayed in the GUI, for providing a mechanism for user navigation and input, for notifying about app status change, and/or other such events and actions. A collection or composite of UI controls may be called a UI component herein.
An app developer may use a UI container to organize the various UI components of their application. By using a layout, a UI container manages the positioning and size of any UI component that it contains. Typically, any controls that are added to a container are known as children. A container can also contain other containers, called sub-containers. A display may show one or more containers concurrently.
Typically, a container specifies a layout model. The layout model defines how UI controls therein are organized, arranged, and repositioned, within the parent container. The layout model definition is a useful method of automatically arranging controls without a programmer hard-coding the relative position of a control and without the programmer worrying about the details of the physical device. This is because the device, using the layout model, automatically determines the preferred size and position of each control in the container, depending on the ideal size of the control and the amount of available space within the parent container. Letting the layout model definition automatically position and place the UI controls increases the chance that the application will appear correctly regardless of device type or screen size.
Due to mobile screen-size limitation (especially phone screen size), a UI programmer/designer has a challenge in optimizing the UI layout of mobile application. Conventionally, there is an optimization for the unused space in the container area. An example is the Flexible Box (or flex container or “flexbox”) layout model in cascade style sheet (CSS) standard. The children of a flex container can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical or vertical inside horizontal) can be used to build layouts in two dimensions.
FIG. 1 shows an example conventional container 100 shown on similarly sized screen of a device (not shown). Herein, the space available in the container is called the container real estate. Similarly, the space available in the screen is the screen real estate. If the container and the screen are coextensive, then the container and screen real estate match.
The container 100 has three children containers 120, 130, and 140. Each child container is approximately the same size. The size of the children containers is not optimized for the screen size. Consequently, there is much unused space on the screen.
FIG. 1 also shows an example conventional flex container 110 shown on similarly sized screen of a device (not shown). The flex container 110 has three children flex containers 122, 132, and 142. The size of each child flex container is adjusted to fill-up the unused space of the flex container 110. Unlike the children containers of container 100, the size and shape of the children flex containers are optimized for the screen size.